@namespace FluentCMS.Web.UI
@rendermode RenderMode.InteractiveServer

<HeadContent>
    <link rel="stylesheet" href="/_content/FluentCMS.Web.UI/css/sitebuilder.editor.css">
    <title>FluentCMS | Edit page</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-title" content="FluentCMS">
    <meta name="application-name" content="FluentCMS">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#2d3250">

    <link rel="icon" type="image/png" sizes="32x32" href="/_content/FluentCMS.Web.UI/images/favicon-32x32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/_content/FluentCMS.Web.UI/images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/_content/FluentCMS.Web.UI/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/_content/FluentCMS.Web.UI/images/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/_content/FluentCMS.Web.UI/images/favicon-16x16.png">
    <link rel="mask-icon" href="/_content/FluentCMS.Web.UI/images/safari-pinned-tab.svg" color="#2d3250">

    <script>
        function calculateScrollbarSize() {
            var scrollDiv = document.createElement("div");
            
            scrollDiv.style.width = '100px';
            scrollDiv.style.height = '100px';
            scrollDiv.style.overflow = 'scroll';
            scrollDiv.style.position = 'absolute';
            scrollDiv.style.top = '-9999px';
            document.documentElement.appendChild(scrollDiv);
            var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
            document.documentElement.setAttribute('style', '--scrollbar-width: ' + scrollbarWidth + 'px')

            document.documentElement.removeChild(scrollDiv);
        }
        calculateScrollbarSize();
    </script>
</HeadContent>

<div class="f-page-editor f-page-editor-sidebar-open f-page-editor-loading">
    <div class="f-toolbar">
        <div class="f-toolbar-container">
            <div class="f-toolbar-start">
                <div class="f-toolbar-spacer"></div>
                <a data-enhance-nav="disabled" href="/admin">
                    <img src="/_content/FluentCMS.Web.UI/images/logo.svg" />
                </a>
                <a data-enhance-nav="disabled" href="/admin" class="f-toolbar-button f-toolbar-button-link">
                    <svg width="11" height="12" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.18182 18C3.63518 16.9895 0 12.6998 0 8.18182V3.27273L8.18182 0L16.3636 3.27273V8.18182C16.3636 12.7015 12.7285 16.9895 8.18182 18ZM1.63636 4.09091V8.18182C1.68312 10.0736 2.34848 11.8979 3.5306 13.3755C4.71272 14.8532 6.34648 15.9028 8.18182 16.3636C10.0172 15.9028 11.6509 14.8532 12.833 13.3755C14.0152 11.8979 14.6805 10.0736 14.7273 8.18182V4.09091L8.18182 1.63636L1.63636 4.09091Z" fill="#154EF2"/>
                        <path d="M8.18217 8.18173C9.31185 8.18173 10.2276 7.26595 10.2276 6.13627C10.2276 5.0066 9.31185 4.09082 8.18217 4.09082C7.0525 4.09082 6.13672 5.0066 6.13672 6.13627C6.13672 7.26595 7.0525 8.18173 8.18217 8.18173Z" fill="#154EF2"/>
                        <path d="M4.0918 11.4545C4.49494 12.1895 5.08621 12.8042 5.80505 13.2355C6.52389 13.6668 7.34446 13.8993 8.18271 13.9091C9.02095 13.8993 9.84152 13.6668 10.5604 13.2355C11.2792 12.8042 11.8705 12.1895 12.2736 11.4545C12.2532 9.90327 9.53925 9 8.18271 9C6.8188 9 4.11225 9.90327 4.0918 11.4545Z" fill="#154EF2"/>
                    </svg>
                    <span class="f-toolbar-button-text">
                        Admin Panel
                    </span>
                </a>
            </div>
            <div class="f-toolbar-center">
                <div class="f-toolbar-responsive-buttons">
                    <button data-action="responsive-default"
                        class="f-toolbar-responsive-button f-toolbar-responsive-button-active">
                        <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.9" d="M7 17H10M10 17H13M10 17V14M10 14H17C17.5304 14 18.0391 13.7893 18.4142 13.4142C18.7893 13.0391 19 12.5304 19 12V3C19 2.46957 18.7893 1.96086 18.4142 1.58579C18.0391 1.21071 17.5304 1 17 1H3C2.46957 1 1.96086 1.21071 1.58579 1.58579C1.21071 1.96086 1 2.46957 1 3V12C1 12.5304 1.21071 13.0391 1.58579 13.4142C1.96086 13.7893 2.46957 14 3 14H10Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                    <button data-action="responsive-desktop" class="f-toolbar-responsive-button">
                        <svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20.4273 11.7073H19.4727V2.14634C19.4727 1.5771 19.2515 1.03117 18.8577 0.628649C18.4638 0.226132 17.9297 0 17.3727 0H3.62727C3.07032 0 2.53617 0.226132 2.14235 0.628649C1.74852 1.03117 1.52727 1.5771 1.52727 2.14634V11.7073H0.572727C0.420831 11.7073 0.275155 11.769 0.167748 11.8788C0.0603407 11.9885 0 12.1374 0 12.2927V13.8537C0 14.4229 0.221249 14.9688 0.615076 15.3714C1.0089 15.7739 1.54305 16 2.1 16H18.9C19.457 16 19.9911 15.7739 20.3849 15.3714C20.7787 14.9688 21 14.4229 21 13.8537V12.2927C21 12.1374 20.9397 11.9885 20.8323 11.8788C20.7248 11.769 20.5792 11.7073 20.4273 11.7073ZM2.67273 2.14634C2.67273 1.88759 2.7733 1.63944 2.95231 1.45648C3.13132 1.27352 3.37411 1.17073 3.62727 1.17073H17.3727C17.6259 1.17073 17.8687 1.27352 18.0477 1.45648C18.2267 1.63944 18.3273 1.88759 18.3273 2.14634V11.7073H2.67273V2.14634ZM19.8545 13.8537C19.8545 14.1124 19.754 14.3606 19.575 14.5435C19.396 14.7265 19.1532 14.8293 18.9 14.8293H2.1C1.84684 14.8293 1.60405 14.7265 1.42503 14.5435C1.24602 14.3606 1.14545 14.1124 1.14545 13.8537V12.878H19.8545V13.8537ZM12.6 3.70732C12.6 3.86257 12.5397 4.01146 12.4323 4.12123C12.3248 4.23101 12.1792 4.29268 12.0273 4.29268H8.97273C8.82083 4.29268 8.67516 4.23101 8.56775 4.12123C8.46034 4.01146 8.4 3.86257 8.4 3.70732C8.4 3.55207 8.46034 3.40318 8.56775 3.2934C8.67516 3.18362 8.82083 3.12195 8.97273 3.12195H12.0273C12.1792 3.12195 12.3248 3.18362 12.4323 3.2934C12.5397 3.40318 12.6 3.55207 12.6 3.70732Z" fill="currentColor"/>
                        </svg>

                    </button>
                    <button data-action="responsive-tablet" class="f-toolbar-responsive-button">
                        <svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.5263 1H3.10526C1.94256 1 1 1.94256 1 3.10526V14.8947C1 16.0574 1.94256 17 3.10526 17H11.5263C12.689 17 13.6316 16.0574 13.6316 14.8947V3.10526C13.6316 1.94256 12.689 1 11.5263 1Z" stroke="currentColor"/>
                            <path d="M9.84169 14.0527H4.78906" stroke="currentColor"/>
                        </svg>
                    </button>
                    <button data-action="responsive-mobile" class="f-toolbar-responsive-button">
                        <svg width="13" height="18" viewBox="0 0 13 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6.50014 14.3172C6.93601 14.3172 7.28935 13.9638 7.28935 13.528C7.28935 13.0921 6.93601 12.7388 6.50014 12.7388C6.06428 12.7388 5.71094 13.0921 5.71094 13.528C5.71094 13.9638 6.06428 14.3172 6.50014 14.3172Z" fill="currentColor"/>
                            <path d="M10.9089 18H2.09114C1.50598 17.9661 0.95827 17.7092 0.567182 17.2851C0.176094 16.8611 -0.0267315 16.3043 0.0028322 15.7357V2.26427C-0.0267315 1.69575 0.176094 1.13889 0.567182 0.714855C0.95827 0.290815 1.50598 0.0338981 2.09114 0H10.9089C11.494 0.0338981 12.0417 0.290815 12.4328 0.714855C12.8239 1.13889 13.0267 1.69575 12.9972 2.26427V15.7357C13.0267 16.3043 12.8239 16.8611 12.4328 17.2851C12.0417 17.7092 11.494 17.9661 10.9089 18ZM2.09114 0.905706C1.75377 0.94031 1.44381 1.10195 1.22777 1.35593C1.01172 1.60992 0.906806 1.93602 0.935529 2.26427V15.7357C0.906806 16.064 1.01172 16.3901 1.22777 16.6441C1.44381 16.8981 1.75377 17.0597 2.09114 17.0943H10.9089C11.2462 17.0597 11.5562 16.8981 11.7722 16.6441C11.9883 16.3901 12.0932 16.064 12.0645 15.7357V2.26427C12.0932 1.93602 11.9883 1.60992 11.7722 1.35593C11.5562 1.10195 11.2462 0.94031 10.9089 0.905706H2.09114Z" fill="currentColor"/>
                        </svg>

                    </button>
                </div>
            </div>
            <div class="f-toolbar-end">
                <div class="f-toolbar-toggle-buttons">
                    <button data-action="exit-design" class="f-toolbar-toggle-button f-toolbar-toggle-button-disabled">
                        <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M11.2877 6.6002C11.2877 7.23671 11.0347 7.84716 10.5843 8.29725C10.1339 8.74734 9.523 9.0002 8.88604 9.0002C8.24908 9.0002 7.63821 8.74734 7.18781 8.29725C6.73741 7.84716 6.48438 7.23671 6.48438 6.6002C6.48438 5.96368 6.73741 5.35323 7.18781 4.90314C7.63821 4.45305 8.24908 4.2002 8.88604 4.2002C9.523 4.2002 10.1339 4.45305 10.5843 4.90314C11.0347 5.35323 11.2877 5.96368 11.2877 6.6002Z"
                                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                                d="M0.880859 6.6C2.16175 3.3224 5.15263 1 8.88642 1C12.6202 1 15.6111 3.3224 16.892 6.6C15.6111 9.8776 12.6202 12.2 8.88642 12.2C5.15263 12.2 2.16175 9.8776 0.880859 6.6Z"
                                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </button>
                    <span class="f-toolbar-toggle-button f-toolbar-toggle-button-active">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M15.7001 3.24175L12.7788 0.30041C12.5858 0.108008 12.3245 0 12.0522 0C11.7799 0 11.5187 0.108008 11.3256 0.30041L0.969226 10.6599L0.0236625 14.7479C-0.0089563 14.8973 -0.0078381 15.0522 0.0269353 15.2011C0.0617087 15.3501 0.129259 15.4894 0.224651 15.6088C0.320043 15.7283 0.440868 15.8249 0.578299 15.8915C0.715729 15.9582 0.866293 15.9933 1.01899 15.9942C1.09012 16.0019 1.16186 16.0019 1.23299 15.9942L5.35863 15.047L15.7001 4.69747C15.8922 4.50409 16 4.2424 16 3.96961C16 3.69682 15.8922 3.43513 15.7001 3.24175ZM4.86097 14.1497L0.99411 14.9623L1.87498 11.1634L9.62362 3.4312L12.6096 6.42239L4.86097 14.1497ZM13.2765 5.69952L10.2905 2.70832L12.0224 0.983399L14.9586 3.9746L13.2765 5.69952Z"
                                fill="currentColor" />
                        </svg>
                    </span>
                </div>

                <SiteBuilderToolbarDropdown />
               
                <button data-action="toggle-add-plugin" class="f-button-visible f-toolbar-button f-toolbar-button-icon">
                    <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.21573 7.52981L8.68745 9.99981L6.21573 12.4698C6.11694 12.5615 6.04472 12.6781 6.00668 12.8073C5.96864 12.9366 5.96619 13.0737 5.99958 13.2042C6.03298 13.3347 6.10099 13.4538 6.19644 13.549C6.29189 13.6441 6.41126 13.7118 6.54196 13.7448C6.67243 13.7781 6.80947 13.7757 6.9387 13.7379C7.06793 13.7001 7.1846 13.6282 7.27647 13.5298L10.2786 10.5298C10.4191 10.3892 10.498 10.1986 10.498 9.99981C10.498 9.80106 10.4191 9.61044 10.2786 9.46981L7.27647 6.46981C7.18473 6.37109 7.06805 6.29892 6.93871 6.2609C6.80937 6.22289 6.67217 6.22044 6.54155 6.25381C6.41094 6.28719 6.29175 6.35515 6.19654 6.45053C6.10134 6.54592 6.03364 6.6652 6.00058 6.79581C5.96725 6.92619 5.96964 7.06314 6.00749 7.19228C6.04535 7.32142 6.11728 7.43801 6.21573 7.52981Z" fill="#154EF2"/>
                        <path d="M2.72387 0H19.2353C20.202 0 20.9866 0.784 20.9866 1.75V18.25C20.9866 18.7141 20.8021 19.1592 20.4736 19.4874C20.1452 19.8156 19.6998 20 19.2353 20H2.72387C2.25942 20 1.81399 19.8156 1.48558 19.4874C1.15716 19.1592 0.972656 18.7141 0.972656 18.25V1.75C0.972656 0.784 1.7572 0 2.72387 0ZM2.4737 1.75V18.25C2.4737 18.388 2.58578 18.5 2.72387 18.5H13.9817V1.5H2.72387C2.65752 1.5 2.59389 1.52634 2.54697 1.57322C2.50006 1.62011 2.4737 1.6837 2.4737 1.75ZM15.4827 18.5H19.2353C19.3017 18.5 19.3653 18.4737 19.4122 18.4268C19.4592 18.3799 19.4855 18.3163 19.4855 18.25V1.75C19.4855 1.6837 19.4592 1.62011 19.4122 1.57322C19.3653 1.52634 19.3017 1.5 19.2353 1.5H15.4827V18.5Z" fill="#154EF2"/>
                    </svg>
                </button>
                <button data-action="toggle-add-plugin" class="f-button-hidden f-toolbar-button f-toolbar-button-icon">
                    <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.2589 7.52981L7.78716 9.99981L10.2589 12.4698C10.3577 12.5615 10.4299 12.6781 10.4679 12.8073C10.506 12.9366 10.5084 13.0737 10.475 13.2042C10.4416 13.3347 10.3736 13.4538 10.2782 13.549C10.1827 13.6441 10.0634 13.7118 9.93265 13.7448C9.80218 13.7781 9.66514 13.7757 9.53591 13.7379C9.40668 13.7001 9.29001 13.6282 9.19814 13.5298L6.19605 10.5298C6.05551 10.3892 5.97656 10.1986 5.97656 9.99981C5.97656 9.80106 6.05551 9.61044 6.19605 9.46981L9.19814 6.46981C9.28988 6.37109 9.40656 6.29892 9.5359 6.2609C9.66524 6.22289 9.80244 6.22044 9.93305 6.25381C10.0637 6.28719 10.1829 6.35515 10.2781 6.45053C10.3733 6.54592 10.441 6.6652 10.474 6.79581C10.5074 6.92619 10.505 7.06314 10.4671 7.19228C10.4293 7.32142 10.3573 7.43801 10.2589 7.52981Z" fill="#154EF2"/>
                        <path d="M2.72387 0H19.2353C20.202 0 20.9866 0.784 20.9866 1.75V18.25C20.9866 18.7141 20.8021 19.1592 20.4736 19.4874C20.1452 19.8156 19.6998 20 19.2353 20H2.72387C2.25942 20 1.81399 19.8156 1.48558 19.4874C1.15716 19.1592 0.972656 18.7141 0.972656 18.25V1.75C0.972656 0.784 1.7572 0 2.72387 0ZM2.4737 1.75V18.25C2.4737 18.388 2.58578 18.5 2.72387 18.5H13.9817V1.5H2.72387C2.65752 1.5 2.59389 1.52634 2.54697 1.57322C2.50006 1.62011 2.4737 1.6837 2.4737 1.75ZM15.4827 18.5H19.2353C19.3017 18.5 19.3653 18.4737 19.4122 18.4268C19.4592 18.3799 19.4855 18.3163 19.4855 18.25V1.75C19.4855 1.6837 19.4592 1.62011 19.4122 1.57322C19.3653 1.52634 19.3017 1.5 19.2353 1.5H15.4827V18.5Z" fill="#154EF2"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="f-page-editor-iframe-wrapper">
        <div class="f-page-editor-iframe-resizer" />
        <iframe class="f-page-editor-iframe" src="@(NavigationManager.Uri.Replace("pageEdit", "pagePreview"))">
        </iframe>
    </div>
</div>
